<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-24 22:26:04
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <u-popup :show="true" class="popup" mode="center" width="100%" height="100%">
    <view class="popup-container">
      <!-- <u-button class="close-btn" icon="close" @click="handleCancel"></u-button> -->
      <!-- <u-button class="back-btn" icon="arrow-left" @click="back"></u-button> -->
      <WeChat v-if="state === 'weChat'">
        <view class="align-items_center align-items_center gap_sm mt_md">
          <div class="flex"></div>
          <div class="flex_3 align-items_center gap_sm">
            <u-button
              class="px_lg"
              icon="chat-fill"
              size="small"
              v-if="state !== 'weChat'"
              @click="handleToggle('weChat')"
            ></u-button>
            <u-button
              class="px_lg"
              icon="phone-fill"
              size="small"
              v-if="state !== 'mobile'"
              @click="handleToggle('mobile')"
            ></u-button>
            <u-button
              class="px_lg"
              icon="home-fill"
              size="small"
              v-if="state !== 'email'"
              @click="handleToggle('email')"
            ></u-button>
          </div>
          <div class="flex"></div>
        </view>
      </WeChat>
      <Mobile v-if="state === 'mobile'">
        <view class="align-items_center align-items_center gap_sm mt_md">
        <div class="flex"></div>
        <div class="flex_3 align-items_center gap_sm">
          <u-button
            class="px_lg"
            icon="chat-fill"
            size="small"
            v-if="state !== 'weChat'"
            @click="handleToggle('weChat')"
          ></u-button>
          <u-button
            class="px_lg"
            icon="phone-fill"
            size="small"
            v-if="state !== 'mobile'"
            @click="handleToggle('mobile')"
          ></u-button>
          <u-button
            class="px_lg"
            icon="home-fill"
            size="small"
            v-if="state !== 'email'"
            @click="handleToggle('email')"
          ></u-button>
        </div>
        <div class="flex"></div>
      </view>
      </Mobile>
      <Email v-if="state === 'email'">
        <view class="align-items_center align-items_center gap_sm mt_md">
        <div class="flex"></div>
        <div class="flex_3 align-items_center gap_sm">
          <u-button
            class="px_lg"
            icon="chat-fill"
            size="small"
            v-if="state !== 'weChat'"
            @click="handleToggle('weChat')"
          ></u-button>
          <u-button
            class="px_lg"
            icon="phone-fill"
            size="small"
            v-if="state !== 'mobile'"
            @click="handleToggle('mobile')"
          ></u-button>
          <u-button
            class="px_lg"
            icon="home-fill"
            size="small"
            v-if="state !== 'email'"
            @click="handleToggle('email')"
          ></u-button>
        </div>
        <div class="flex"></div>
      </view>
      </Email>
    </view>
  </u-popup>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import uPopup from 'uview-plus/components/u-popup/u-popup.vue';
import uOverlay from 'uview-plus/components/u-overlay/u-overlay.vue';
import uTransition from 'uview-plus/components/u-transition/u-transition.vue';
import WeChat from './WeChat/index.vue';
import Email from './Email/index.vue';
import Mobile from './Mobile/index.vue';
import emitter from '@/utils/emitter';


export default defineComponent({
  name: 'Popup',
  components: {
    uPopup,
    uOverlay,
    uTransition,
    WeChat,
    Email,
    Mobile,
  },
  emits: ['vanish'],
  setup(_, { emit }) {
    const state = ref<String>('weChat');

    const handleCancel = () => {
      emit('vanish');
    };

    emitter.on('vanish', handleCancel)

    const handleToggle = (value: String) => {
      state.value = value;
    };
    const handleBack = () => {};
    return {
      handleCancel,
      handleBack,
      state,
      handleToggle,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.popup-container {
  min-width: 380px;
  padding: map-get($spaces, lg);
  border-radius: map-get($radii, lg);
  background: url('./static/images/login-bg.png') center center/cover no-repeat;

  .close-btn {
    position: absolute;
    top: map-get($spaces, xs);
    right: map-get($spaces, xs);
    width: 32px;
    height: 32px;
    border: none;
    background: none;
  }

  // .back-btn {
  //   position: absolute;
  //   top: map-get($spaces, xs);
  //   left: map-get($spaces, xs);
  //   width: 32px;
  //   height: 32px;
  //   border: none;
  //   background: none;
  // }
}
</style>
